<script setup>
import selectImagePopup from './child/selectImagePopup.vue'
import { useAppStore } from '@/store'
import { ref, onMounted, inject, computed } from 'vue'

const props = defineProps({
    show: {
        type: Array,
        default: () => [0, 1, 2]
    },
})


const emit = defineEmits(['quickJumpClick'])

const appStore = useAppStore()

// 页面传递参数
const queryItem = ref({})
const getQueryItemFn = inject("getQueryItemFn")

const selectImageShow = ref(false)
const activeName = ref('高清')

// 立即生成
function createConfirm(e) {
    if (activeName.value === '高清') {
        let data = Object.assign({ id: appStore.filterHomeCategory(3) }, {
            imageFileUrl: e,
            prompt: queryItem.value.promptContent,
        })
        uni.navigateTo({
            url: `/draw/highQualityPic/index?item=${JSON.stringify(data)}`
        })
    } else if (activeName.value === '消除') {
        let data = Object.assign({ id: appStore.filterHomeCategory(4) }, {
            imageFileUrl: e,
            prompt: queryItem.value.promptContent,
        })
        uni.navigateTo({
            url: `/newEditionDraw/eliminate/index?item=${JSON.stringify(data)}`
        })
    } else if (activeName.value === '局部绘图') {
        let data = Object.assign({ id: appStore.filterHomeCategory(9) }, {
            imageFileUrl: e,
            prompt: queryItem.value.promptContent,
        })
        uni.navigateTo({
            url: `/newEditionDraw/localRedrawing/index?item=${JSON.stringify(data)}`
        })
    }
}


// 点击跳转事件
function quickJumpClick(e) {
    activeName.value = e
    selectImageShow.value = true
}

onMounted(() => {
    queryItem.value = getQueryItemFn()
})
</script>

<template>
    <div class='quickJump'>
        <div class="quickJump_item" @click="quickJumpClick('高清')" v-if="show.includes(0)">
            <i class="iconfont ai-icon-gaoqing"></i>
            <div class="text">高清</div>
        </div>
        <div class="quickJump_item" @click="quickJumpClick('消除')" v-if="show.includes(1)">
            <i class="iconfont ai-icon-Frame4"></i>
            <div class="text">消除</div>
        </div>
        <div class="quickJump_item" @click="quickJumpClick('局部绘图')" v-if="show.includes(2)">
            <i class="iconfont ai-icon-jubuhuitu"></i>
            <div class="text">局部绘图</div>
        </div>
    </div>
    <selectImagePopup :name="activeName" v-model="selectImageShow" @createConfirm="createConfirm"></selectImagePopup>
</template>

<style lang='scss' scoped>
.quickJump {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .quickJump_item {
        height: 74rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5rpx;
        color: var(--a-one-text-color);
        font-size: 24rpx;
        text-align: center;

        .iconfont {
            font-size: 36rpx;
        }
    }
}
</style>